<template>
    <div class="container container-demandDeliver">
        <DemandTopVue :showBtn="false" :detailInfo="detailInfo" v-if="detailInfo.id" />
        <div class="page-panell">
            <div class="panel-title">
                <div class="panel-content">投递方案</div>
            </div>
        </div>
        <a-spin tip="Loading..." :spinning="formLoading">
            <a-form-model layout="inline" class="yuan-form panel-content">
                <div class="form-panel">
                    <a-form-model-item class="yuan-form-row" label="是否从已有成果方案导入" :label-col="{ style: { width: '170px' } }"
                        :wrapper-col="{ style: { width: 'calc(100% - 170px)' } }">
                        <a-radio-group v-model="pageType" @change="pageTypeChange">
                            <a-radio :value="1">否</a-radio>
                            <a-radio :value="2">
                                <span>是</span>
                                <span v-if="pageType===2">: </span>
                                <a-select style="width:200px" class="yuan-form-input" v-model="selectMyAchId" placeholder="请选择方案"
                                    v-if="pageType===2" @change="selectMyAch">

                                    <a-select-option :value="item.id"
                                        v-for="item in myAchList" :key="item.id">{{item.achievementName}}</a-select-option>
                                </a-select>

                            </a-radio>

                        </a-radio-group>
                    </a-form-model-item>
                </div>
            </a-form-model>

            <a-form-model layout="inline" class="yuan-form panel-content" :label-col="{ style: { width: '120px' } }"
                :wrapper-col="{ style: { width: 'calc(100% - 130px)' } }" ref="form" :model="formData" :rules="rules"
                :class="pageType===2?'disable-form':''">

                <div class="form-panel">
                    <a-form-model-item label="封面图" class="yuan-form-item" v-if="pageReady">
                        <UploadVue :uploadLength="1" @uploadChange="uploadChangeCoverImageUrl"
                            :defImgList="formData.coverPicture?[formData.coverPicture]:[]" />
                        <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                    </a-form-model-item>

                    <a-form-model-item class="yuan-form-item yuan-form-col3" label="成果名称" prop="achievementName">
                        <a-input class="yuan-form-input" v-model="formData.achievementName" placeholder="请输入"></a-input>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-item yuan-form-col3" label="成果负责人" prop="achievementPrincipal">
                        <a-input class="yuan-form-input" v-model="formData.achievementPrincipal" placeholder="请输入"></a-input>
                    </a-form-model-item>
                    <!-- <a-form-model-item class="yuan-form-item yuan-form-col3" label="联系方式" prop="achievementPrincipalPhone">
                        <a-input class="yuan-form-input" v-model="formData.achievementPrincipalPhone"
                            placeholder="联系方式"></a-input>
                    </a-form-model-item> -->

                    <a-form-model-item class="yuan-form-row" label="成果类别" prop="achievementCategory">
                        <a-radio-group v-model="formData.achievementCategory">
                            <a-radio value="发明专利">发明专利</a-radio>
                            <a-radio value="实用新型专利">实用新型专利</a-radio>
                            <a-radio value="外观设计专利">外观设计专利</a-radio>
                            <a-radio value="技术">技术</a-radio>
                            <a-radio value="软件著作权">软件著作权</a-radio>
                            <a-radio value="版权等其他著作权">版权等其他著作权</a-radio>
                            <a-radio value="集成电路布图设计">集成电路布图设计</a-radio>
                            <a-radio value="植物新品种">植物新品种</a-radio>
                            <a-radio value="其他">其他</a-radio>
                            <!-- <a-radio value="其他">
                                <span>其他：</span>
                                <CountInputVue style="margin-left:5px" class="yuan-form-input"
                                    v-model="formData.achievementCategoryOther" :maxNum="15" placeholder="请输入" />
                            </a-radio> -->
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-row" label="课题来源" prop="taskSource">
                        <a-radio-group v-model="formData.taskSource">
                            <a-radio :value="item.content" v-for="item in taskSourceList"
                                :key="item.id">{{item.content}}</a-radio>
                            <!-- <a-radio value="其他">
                                <span>其他：</span>
                                <CountInputVue style="margin-left:5px" class="yuan-form-input"
                                    v-model="formData.taskSourceListOther" :maxNum="15" placeholder="请输入" />
                            </a-radio> -->
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-row" label="所属技术类别" prop="belongToTechnologyCategory">
                        <a-checkbox-group v-model="formData.belongToTechnologyCategory">
                            <a-checkbox :value="item.content" v-for="item in territoryList"
                                :key="item.id">{{item.content}}</a-checkbox>
                            <!-- <a-checkbox value="其他">
                                <span>其他：</span>
                                <CountInputVue style="margin-left:5px" class="yuan-form-input"
                                    v-model="formData.belongToTechnologyCategoryOther" :maxNum="15" placeholder="请输入" />
                            </a-checkbox> -->
                        </a-checkbox-group>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-row" label="应用状态" prop="useState">
                        <a-radio-group v-model="formData.useState">
                            <a-radio value="产业化应用">产业化应用</a-radio>
                            <a-radio value="小批量或小范围应用">小批量或小范围应用</a-radio>
                            <a-radio value="试用">试用</a-radio>
                            <a-radio value="未应用">未应用</a-radio>
                            <a-radio value="应用后停用">应用后停用</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-row" label="推广形式" prop="promotionForm">
                        <a-checkbox-group v-model="formData.promotionForm">
                            <a-checkbox :value="item.content" v-for="item in promotionFormList"
                                :key="item.id">{{item.content}}</a-checkbox>
                            <!-- <a-checkbox value="其他">
                                <span>其他：</span>
                                <CountInputVue style="margin-left:5px" class="yuan-form-input"
                                    v-model="formData.promotionFormOther" :maxNum="15" placeholder="请输入" />
                            </a-checkbox> -->
                        </a-checkbox-group>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="成果年份" prop="achievementYear">
                        <a-date-picker mode="year" class="yuan-form-input" placeholder="选择年份" v-model="formData.achievementYear"
                            inputReadOnly format="YYYY" :open="monthPickShow" @panelChange="handlePanelChange"
                            @openChange="handleOpenChange" />
                    </a-form-model-item>

                    <a-form-model-item class="yuan-form-row" label="研究形式" prop="studyForm">
                        <a-radio-group v-model="formData.studyForm">
                            <a-radio value="独立研究">独立研究</a-radio>
                            <a-radio value="与院校合作">与院校合作</a-radio>
                            <a-radio value="与企业合作">与企业合作</a-radio>
                            <a-radio value="与国（境）外合作">与国（境）外合作</a-radio>
                            <a-radio value="其他">其他</a-radio>
                            <!-- <a-radio value="其他">
                                <span>其他：</span>
                                <CountInputVue style="margin-left:5px" class="yuan-form-input" v-model="formData.studyFormOther"
                                    :maxNum="15" placeholder="请输入" />
                            </a-radio> -->
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-row" label="成果体现形式" prop="embodyForm">
                        <a-checkbox-group v-model="formData.embodyForm">
                            <a-checkbox value="新技术">新技术</a-checkbox>
                            <a-checkbox value="新产品">新产品</a-checkbox>
                            <a-checkbox value="新工艺">新工艺</a-checkbox>
                            <a-checkbox value="农业，生物新品种">农业，生物新品种</a-checkbox>
                            <a-checkbox value="新材料">新材料</a-checkbox>
                            <a-checkbox value="新装备">新装备</a-checkbox>
                            <a-checkbox value="行业标准">行业标准</a-checkbox>
                            <a-checkbox value="国家标准">国家标准</a-checkbox>
                            <a-checkbox value="地方标准">地方标准</a-checkbox>
                            <a-checkbox value="企业标准">企业标准</a-checkbox>
                            <a-checkbox value="国际标准">国际标准</a-checkbox>
                            <a-checkbox value="矿产新品种">矿产新品种</a-checkbox>
                            <a-checkbox value="其他应用技术">其他应用技术</a-checkbox>
                        </a-checkbox-group>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-row" label="应用行业" prop="applicationIndustry">
                        <a-checkbox-group v-model="formData.applicationIndustry">
                            <a-checkbox :value="item.content" v-for="item in applicationIndustryList"
                                :key="item.id">{{item.content}}</a-checkbox>
                            <!-- <a-checkbox value="其他">
                                <span>其他：</span>
                                <CountInputVue style="margin-left:5px" class="yuan-form-input"
                                    v-model="formData.applicationIndustryOther" :maxNum="15" placeholder="请输入" />
                            </a-checkbox> -->
                        </a-checkbox-group>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-row" label="技术成熟度" prop="skillRipe">
                        <a-radio-group v-model="formData.skillRipe">
                            <a-radio value="成熟应用阶段">成熟应用阶段</a-radio>
                            <a-radio value="中期阶段">中期阶段</a-radio>
                            <a-radio value="初期阶段">初期阶段</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="联系人" prop="contacts">
                        <a-input class="yuan-form-input" v-model="formData.contacts" placeholder="请输入联系人"></a-input>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="联系方式" prop="contactWay">
                        <a-input class="yuan-form-input" v-model="formData.contactWay" placeholder="请输入联系方式"></a-input>
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-item yuan-form-col5" label="发布地址" prop="placeAreaCode">
                        <a-cascader class="yuan-form-input" v-model="formData.placeAreaCode" :options="addrData" placeholder="请选择"
                            @change="onAddrChange" />
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-row" label="成果描述" prop="achievementDescription">
                        <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                            v-model="formData.achievementDescription" placeholder="请输入成果描述" :maxLength="1000" />
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-row" label="其他" prop="otherDetails">
                        <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                            v-model="formData.otherDetails" placeholder="请输入" :maxLength="1000" />
                    </a-form-model-item>
                    <a-form-model-item class="yuan-form-row" label="授权经纪人">
                        <span v-show="formData.technicalRepresentative">{{formData.technicalRepresentative}} </span>
                        <a-button type="primary" @click="()=>userVisible=true">选择技术经纪人</a-button>
                    </a-form-model-item>
                </div>

            </a-form-model>
            <div class="bottom-btn-box">
                <a-button class="bottom-btn" type="primary" @click="save">投递方案</a-button>
            </div>
        </a-spin>
        <a-modal title="提示" :visible="visible" :confirm-loading="formLoading" @ok="onOk" @cancel="closeModal" okText="确定"
            cancelText="取消">
            <div>
                您的方案需要递交到平台进行审核，在平台审核通过会自动投递到该需求，您可以在工作台-成果管理查看投递进度。
            </div>
            <div>
                是否投递该方案？
            </div>
        </a-modal>
        <UserVue :visible="userVisible" @closeModal="() => userVisible = false" @sureClose="selectUser" />
    </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import DemandTopVue from "./components/demandTop.vue";
import CountInputVue from "@/components/countInput.vue";
import api from "@/api/api";
import { getStorageUserInfo } from "@/utils";
import UserVue from "@/components/addUserModal.vue";
import areaJson, { getAreaWords } from "@/utils/area";
import { UserModule } from "@/store/modules/userModules";
@Component({
    name: "dom",
    components: { DemandTopVue, CountInputVue, UserVue, UploadVue },
})
export default class index extends Vue {
    visible = false;
    formLoading = false;
    pageType = 1;
    pageReady = false;
    formData: any = {};
    rules = {
        achievementName: [{ required: true, message: "请输入成果名称", trigger: "change" }],
        achievementPrincipal: [{ required: true, message: "请输入成果负责人", trigger: "change" }],
        achievementPrincipalPhone: [{ required: true, message: "请输入成果负责人联系方式", trigger: "change" }],
        achievementCategory: [{ required: true, message: "请选择成果类别", trigger: "change" }],
        taskSource: [{ required: true, message: "请选择课题来源", trigger: "change" }],
        belongToTechnologyCategory: [{ required: true, message: "请选择所属技术类别", trigger: "change" }],
        useState: [{ required: true, message: "请选择应用状态", trigger: "change" }],
        promotionForm: [{ required: true, message: "请选择推广形式", trigger: "change" }],
        studyForm: [{ required: true, message: "请选择研究形式", trigger: "change" }],
        achievementYear: [{ required: true, message: "请输入成果年份", trigger: "change" }],
        embodyForm: [{ required: true, message: "请选择成果体现形式", trigger: "change" }],
        applicationIndustry: [{ required: true, message: "请选择应用行业", trigger: "change" }],
        skillRipe: [{ required: true, message: "请选择技术成熟度", trigger: "change" }],
        contacts: [{ required: true, message: "请填写联系人", trigger: "change" }],
        contactWay: [{ required: true, message: "请填写联系方式", trigger: "change" }],
        achievementDescription: [{ required: true, message: "请填写成果描述", trigger: "change" }],
        placeAreaCode: [{ required: true, message: "请选择发布地址", trigger: "change" }],
    };
    jumpDeliver() {
        this.$router.push({ name: "demandDeliver" });
    }
    closeModal() {
        this.visible = false;
    }
    save() {
        if (!this.formData.coverPicture) {
            this.$message.error("请上传封面图");
            return;
        }
        // if (!this.formData.demandType) {
        //     this.$message.error("请选择成果类型");
        //     return;
        // }
        if (this.formData.hasTechnicalRepresentative === 1 && !this.formData.technicalRepresentative) {
            this.$message.error("请选择技术经纪人");
            return;
        }
        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) return;
            this.visible = true;
        });
    }
    onOk() {
        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) return;
            this.formLoading = true;
            try {
                let data;
                if (this.pageType === 1) {
                    //不是导入
                    data = {
                        demandId: this.detailInfo.id,
                        hasTechnicalRepresentative: this.formData.technicalRepresentative ? 1 : 0,
                        ...this.formData,
                        ifDeliver: 1,
                        //achievementDifferentiate: this.formData.demandType,
                    };
                } else {
                    data = {
                        demandId: this.detailInfo.id,
                        ...this.formData,
                        ifDeliver: 0,
                    };
                }
                const res = await api.addAch(data);
                -this.$message.success("保存成功,您可以在工作台查看对接进度");
                this.formData = {};
                this.pageReady = false;
                this.$nextTick(() => {
                    this.pageReady = true;
                });
                this.closeModal();
            } finally {
                this.formLoading = false;
            }
        });
    }
    mounted() {
        this.pageReady = true;
        this.setAddrData();
        const query = this.$route.query;
        this.pageId = query.id ? query.id + "" : "";

        const userInfo = getStorageUserInfo();
        if (!userInfo || !userInfo.token) {
            UserModule.setShowLoginPanel(true)
            this.$message.warning("登录失效");
            this.$router.go(-1);
            return;
        }
        this.formLoading = true;
        Promise.all([
            this.getTerritoryList(),
            this.getTaskSourceList(),
            this.getPromotionFormList(),
            this.getApplicationIndustryList(),
            this.getDetail(),
            this.getMyAch(),
        ]).then(() => {
            //
            this.formLoading = false;
        });
    }

    pageId = "";
    detailInfo: any = {};
    async getDetail() {
        try {
            const res = await api.getDemandList({
                id: this.pageId,
            });
            this.detailInfo = res.data;
        } finally {
            // this.loading = false;
        }
    }

    territoryList = [];
    async getTerritoryList() {
        try {
            const res = await api.getSetting("3");
            this.territoryList = res.data;
        } finally {
            //
        }
    }
    taskSourceList = [];
    async getTaskSourceList() {
        try {
            const res = await api.getSetting("2");
            this.taskSourceList = res.data;
        } finally {
            //
        }
    }
    promotionFormList = [];
    async getPromotionFormList() {
        try {
            const res = await api.getSetting("4");
            this.promotionFormList = res.data;
        } finally {
            //
        }
    }
    applicationIndustryList = [];
    async getApplicationIndustryList() {
        try {
            const res = await api.getSetting("5");
            this.applicationIndustryList = res.data;
        } finally {
            //
        }
    }

    userVisible = false;
    selectUser(userInfo) {
        this.formData.technicalRepresentative = userInfo.name;
        this.formData.technicalPhone = userInfo.phone;
    }
    myAchList: any[] = [];
    async getMyAch() {
        try {
            const res = await api.getMyActList();
            this.myAchList = res.data;
        } finally {
            //
        }
    }
    selectMyAchId = "";
    selectMyAch() {
        this.pageReady = false;
        const find = this.myAchList.find((item) => item.id === this.selectMyAchId);
        if (find) {
            if (find.applicationIndustry) {
                find.applicationIndustry =
                    typeof find.applicationIndustry === "string"
                        ? JSON.parse(find.applicationIndustry)
                        : find.applicationIndustry;
            }
            if (find.belongToTechnologyCategory) {
                find.belongToTechnologyCategory =
                    typeof find.belongToTechnologyCategory === "string"
                        ? JSON.parse(find.belongToTechnologyCategory)
                        : find.belongToTechnologyCategory;
            }
            if (find.embodyForm) {
                find.embodyForm = typeof find.embodyForm === "string" ? JSON.parse(find.embodyForm) : find.embodyForm;
            }
            if (find.promotionForm) {
                find.promotionForm = typeof find.promotionForm === "string" ? JSON.parse(find.promotionForm) : find.promotionForm;
            }

            find.placeAreaCode = find.code.split(",");

        }
        this.formData = { ...find };
        this.$nextTick(() => {
            this.pageReady = true;
        });
    }

    pageTypeChange() {
        this.pageReady = false;
        this.formData = {};
        this.$nextTick(() => {
            this.pageReady = true;
        });
    }

    uploadChangeCoverImageUrl(e) {
        this.formData.coverPicture = e.length ? e[0].url : "";
    }

    addrData: any[] = [];
    setAddrData() {
        this.addrData = areaJson;
    }
    onAddrChange(e: any) {
        this.formData.code = e.join(",");
        this.formData.location = getAreaWords(e);
    }

    monthPickShow = false;
    handlePanelChange(value) {
        this.formData.achievementYear = value.format("YYYY");
        this.monthPickShow = false;
    }
    handleOpenChange(status) {
        if (status) {
            this.monthPickShow = true;
        } else {
            this.monthPickShow = false;
        }
    }
}
</script>

<style lang="scss">
.container-demandDeliver {
    .panel-content {
        width: 1350px;
        margin: 0 auto;
    }
    .panel-title {
        font-weight: bold;
        font-size: 22px;
        color: #2f65f3;
        background-color: #fff;

        .panel-content {
            height: 40px;
            display: flex;
            align-items: center;
        }
        .panel-content::before {
            content: "";
            display: inline-block;
            height: 26px;
            width: 1px;
            border-right: 3px solid #2f65f3;
            margin-right: 20px;
        }
    }
    .yuan-form {
        background-color: #fff;
        margin-top: 15px;
        padding: 20px;
    }
    .bottom-btn-box {
        text-align: center;
        padding: 50px;
    }
    .bottom-btn {
        height: 40px;
        width: 120px;
        font-size: 14px;
    }
    .disable-form {
        pointer-events: none;
    }
}
</style>
